The JavaScript Playground in your Editor

Quokka.js runs JavaScript and TypeScript with instant feedback, displaying runtime values in your editor as you type.

Get Started

Why Quokka?

Quokka makes exploring, learning, and testing JavaScript / TypeScript blazingly fast. By default no config is required, simply open a new Quokka file and start experimenting. Focus on writing code instead of writing bespoke config files just to try a simple idea or learn a new language feature.

Unlike online REPL tools and standalone playgrounds, Quokka runs your JavaScript code in VS Code, WebStorm, or Sublime, so you can avoid context switching while benefiting from your familiar editor environment and its extensions. You can also import and run files and modules from your project.

Quokka 'Community' edition is free for everyone, brought to you with love by the Wallaby.js team. While working on our Wallaby.js product, our team faces thousands of complex scenarios related to instrumentation, and execution of JavaScript code. Quokka uses the same technology as Wallaby.js, making years of research and development available for free.

We offer a commercial 'Pro' edition that provides a number of additional advanced features, such as the ability to display and explore runtime values without having to modify your code. If you're a real JavaScript ninja and would like the same live-editing experience when writing your unit tests (and a whole lot more), then also check out Wallaby.js.

Live Execution and Results

Code runs immediately as you type, on unsaved changes; no need to do anything manually or switch context. Error messages are displayed right next to the code that caused them. Console logs and identifier expression values are displayed inline as well.

Live Coverage

Indicators in the gutter of your code editor are constantly updated in realtime to display code coverage so you can quickly see which lines of code are the source of an error, which are fully covered, only partially covered or not covered at all.

Snaps

Execute context aware code snippets directly in your editor, anywhere in your project, including Vue.js single file components and Svelte files, even if your application/tests are not working. Enjoy real-time updates and seamless access to file's program scope, import/exports, global scope variables/functions, and more.

Logpoints

Use breakpoints to log values without modifying your code. Regular breakpoints can be used to log line values, and inline breakpoints can be used to log values within a line, whether from multiple statements on the same line or intermediate results in an invocation chain.

Time Machine

Move forward and backwards through your code to understand how your code executes. Time Machine allows you to auto-play or jump to a specific line of code, view runtime values, edit-and-continue and step into, over and out of your code.

Interactive TimelineNEW

Timeline shows color-coded transitions between different functions, and code lines. It also highlights logs, stack traces and errors, showing where they occurred along with past and future hits for the current line - providing valuable context for debugging.

Codeclip

Share feature allows you to share code that you run with Quokka, as well as its output and time machine recording with the world. After upload, you have a chance to review it and change some settings before publishing. Check out our example at Codeclip.io.

Code Stories

Inspect the code that Quokka is executing in a single continuous view. Simply select a variable or expression to see its runtime value. The continuous view of executing code reduces both context switching and the time taken to understand what code is doing.

Value ExplorerNEW

Value Explorer allows non-primitive runtime values to be viewed and explored in an easy-to-navigate real-time treeview. This feature is great for exploring larger objects and makes debugging easier and faster. Values can be copied directly to the clipboard.

Live Comments and Values

Show and copy expression values by selecting them in your editor or with editor commands, accessible using keyboard shortcuts. A special comment format can also be used to evaluate any expressions and includes the ability to measure code execution times.

Project Files Import

Import any files from your project into your Quokka file. Quokka will watch project files for changes and automatically update when dependent files change. Babel or TypeScript may be used for imported files compilation.

CPU Profiler

CPU Profiler allows you to quickly record the CPU usage profile of your code to analyze its runtime performance. Any links that are provided that reference your project files will be opened in your editor when you click them.

Quick Package Install

Quickly install any node package, without switching away from your editor, and without having to type the package name. When you install, choose whether to install just for the active Quokka session or for your entire project.

Join over 1 million developers and companies worldwide who have boosted their productivity and output with Quokka.js.

Show more happy users Loading